<template>
  <div>
    <h2>库存统计</h2>
    <div class="chart" id="myEcharts">
      <!-- 图表容器 -->
    </div>
  </div>
</template>

<script>
import {inject,onMounted,reactive} from "vue"
export default {
  setup(){
    let $echarts=inject("echarts")
    let $http=inject("axios")

    let data=reactive({})

    async function getState(){
      data=await $http({url:"/three/data"})
    }

    onMounted(()=>{
      getState().then(()=>{
        // console.log("饼状图",data)
       let myChart= $echarts.init(document.getElementById("myEcharts"))
       myChart.setOption({
         legend:{
           top:"bottom",
           textStyle: {
             color: "#fff",
             fontSize: 14
           }
         },
         tooltip:{
           show:true
         },
         series:[
           {
             type:"pie",
             data:data.data.chartThree.chartData,
             radius:[10,100],
             center:["50%","45%"],
             roseType:"area",
             itemStyle:{
               borderRadius:10
             },
             label:{
               color: "#fff",
               fontSize:16,
             },
             emphasis:{
               label: {
                 color: ()=>{}
               }
              }
           }
         ]
       })
      })
    })
    return {
      getState,data   
    }
  }
}
</script>

<style scoped>
.chart {
  height: 4.25rem;
}
h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  text-align: center;
}
</style>